<template>
	<view class="content">
		<nav-bar title=' ' bgColor="rgba(255,255,255,0)" titleColor="#333333"></nav-bar>
		<view class="container" :style="{'padding-bottom':blackBarHeight+'px' }">
			<view class="swiper">
				<u-swiper :list="swiperList" indicator indicatorMode="line" circular :height="154" keyName="img"
					@click="set_up"></u-swiper>
			</view>
			<view class="case">
				<view class="title-box">
					<u-icon name="https://item.techolic.cn/hjf/Public/appimg/index_case_icon.png" size="28"></u-icon>
					<view class="title">
						匹配方案
					</view>
				</view>
				<view class="item-box">
					<view class="item-p1">
						<view class="h1">
							匹配方案 ·
						</view>
						<view class="h1-sub">
							快速审批 随用随还
						</view>
					</view>
					<view class="item-p2">
						<view class="left">
							<view class="h1">
								最高额度
							</view>
							<view class="h2">
								200,000
							</view>
						</view>
						<view class="right" @click="caseTap">
							<view class="h2">
								查看方案
							</view>
						</view>
					</view>
					<view class="item-p3">
						最低日利率 0.002%（年化利率 3.6%）
					</view>
				</view>
			</view>
			<view class="product">
				<view class="title-box">
					<u-icon name="https://item.techolic.cn/hjf/Public/appimg/index_case_icon.png" size="28"></u-icon>
					<view class="title">
						推荐产品
					</view>
				</view>
				<view class="tab-box">
					<!-- <u-tabs lineWidth="0" lineHeight="0"
						:activeStyle="{color: '#FF8811',fontWeight: 'bold',transform: 'scale(1.05)'}"
						:list="productList" @click="productClick"></u-tabs> -->
					<view class="item-box">
						<view class="item" v-for="(item,index) in products" @click="productPageTap(item)">
							<view class="item-left">
								<view class="p1">
									{{item.interest}}<!-- <text>%</text> -->
								</view>
								<view class="p2">
									年利率
								</view>
							</view>
							<view class="item-right">
								<view class="p1">
									{{item.name}}
								</view>
								<view class="p2">
									{{item.describe_index}}
								</view>
								<view class="p3">
									<view class="tab" v-for="(item1,index1) in item.describes">
										{{item1}}
									</view>
								</view>
							</view>
							<view class="item-ed">
								<view class="ed-box">
									100万元
								</view>
								<view class="ed-sub">
									最高额度
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp()
	export default {
		name: "tab-index",
		data() {
			return {
				title: 'Hello',
				swiperList: [],
				productList: [],
				products: [],
				blackBarHeight: app.globalData.blackBarHeight,
			};
		},
		mounted() {
			console.log(1111111111)
			console.log(app)
			console.log(app.globalData)
			console.log(app.globalData.blackBarHeight);
			this.get_data();
		},
		methods: {
			productClick(item) {
				console.log('item', item);
				var _this = this;
				app._get('index/get_class_data', {
					classify: item['id'],
					is_show: 1
				}, function(res) {
					_this.products = res.product;

				});
			},
			caseTap() {
				uni.navigateTo({
					url: "/pages/casePage/casePage"
				})
			},
			productPageTap(item) {
				uni.navigateTo({
					url: "/pages/productPage/productPage?id=" + item.id
				})
			},
			get_data(index) {
				var _this = this;
				app._get('index/get_data', {}, function(res) {
					console.log('获取数据');
					console.log(res);
					_this.swiperList = res.rotation;
					_this.productList = res.productList;

					_this.products = res.product;

				});
			},
			set_up(res) {
				console.log(res);
				var swiperList = this.swiperList;
				var value = swiperList[res];
				console.log(value);
				if (value['is_jump'] == 1 && value['link'] != '') {
					uni.navigateTo({
						url: value['link']
					})
				}
			}
		}
	}
</script>
<style lang="less">
	page {
		background-image: url('https://item.techolic.cn/hjf/Public/appimg/person_bg.png');
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
	}

	.content {
		width: 750rpx;
		height: auto;
		padding-bottom: 160rpx;
	}

	.fgx {
		height: 160rpx;
		width: 750rpx;
	}

	.swiper {
		width: 686rpx;
		padding: 32rpx;
		// margin-bottom: 30rpx;
	}

	.case {
		padding: 32rpx;
		// margin-bottom: 30rpx;

		.title-box {
			display: flex;
			align-items: center;

			.title {
				padding-left: 10rpx;
				font-size: 32rpx;
				font-weight: bold;
			}
		}

		.item-box {
			width: 606rpx;
			height: 282rpx;
			margin-top: 20rpx;
			padding: 40rpx;
			background-image: url('https://item.techolic.cn/hjf/Public/appimg/index_case_bg.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;

			.item-p1 {
				display: flex;
				align-items: center;

				padding-bottom: 16rpx;
				border-bottom: 2rpx solid #FFD08F;

				.h1 {
					font-size: 32rpx;
					line-height: 32rpx;
					font-weight: bold;
					color: #ffffff;
				}

				.h1-sub {
					margin-left: 10rpx;
					font-size: 24rpx;
					font-weight: lighter;
					color: rgba(255, 255, 255, .7);
				}
			}

			.item-p2 {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 20rpx 0;

				.left {
					.h1 {
						margin-bottom: 30rpx;
						font-size: 28rpx;
						color: #ffffff;
					}

					.h2 {
						font-size: 48rpx;
						color: #ffffff;
						font-weight: bold;
					}
				}

				.right {
					padding: 16rpx 32rpx;
					font-size: 24rpx;
					color: #FF8811;
					background-color: #ffffff;
					border-radius: 32rpx;
				}
			}

			.item-p3 {
				padding-top: 20rpx;
				font-size: 24rpx;
				color: #ffffff;
			}
		}
	}

	.product {
		padding: 32rpx;
		// margin-bottom: 30rpx;

		.title-box {
			display: flex;
			align-items: center;

			.title {
				padding-left: 10rpx;
				font-size: 32rpx;
				font-weight: bold;
			}
		}

		.tab-box {
			margin-top: 20rpx;
			padding: 16rpx 16rpx 6rpx 16rpx;
			background-color: #EFD1AE;
			background-image: url('https://item.techolic.cn/hjf/Public/appimg/index_product_bg.png');
			background-repeat: no-repeat;
			background-position-x: right;
			background-position-y: top;

			.item-box {
				.item {
					display: flex;
					align-items: center;
					background-color: rgba(255, 255, 255, .6);
					border-radius: 16rpx;
					padding: 24rpx;
					margin-bottom: 10rpx;

					.item-left {
						text-align: center;
						width: 20%;
						padding-right: 24rpx;
						border-right: 2rpx solid #ffffff;

						.p1 {
							margin-bottom: 8rpx;
							font-size: 46rpx;
							color: #ff1111;
							font-weight: bold;

							text {
								font-size: 24rpx;
							}
						}

						.p2 {
							font-size: 20rpx;
							color: #8e8b97;
						}
					}

					.item-right {
						width: 45%;
						padding-left: 24rpx;

						.p1 {
							margin-bottom: 8rpx;
							font-size: 28rpx;
							font-weight: bold;
							color: #1E182F;
						}

						.p2 {
							margin-bottom: 8rpx;
							font-size: 20rpx;
							color: #8e8b97;
						}

						.p3 {
							display: flex;
							align-items: center;

							.tab {
								padding: 6rpx 12rpx;
								margin-right: 10rpx;
								background: #FBF5F2;
								font-size: 16rpx;
								color: #A7876E;
							}
						}
					}

					.item-ed {
						width: 20%;
						text-align: center;
						padding-left: 24rpx;
						border-left: 2rpx solid #ffffff;

						.ed-box {
							margin-bottom: 20rpx;
							font-size: 28rpx;
							font-weight: bold;
							color: #7c4608;
						}

						.ed-sub {
							font-size: 20rpx;
							color: #8e8b97;
						}
					}
				}
			}
		}
	}
</style>